<template>
	<view class="popup" v-if="showPopup">
		<view v-if="failureStatus[equipmentStatus]" class="failure">
			<img :src="failureLogo" alt="">
			<text class="title">{{failureStatus[equipmentStatus].title}}</text>
			<text :style="{ color: equipmentStatus==='stopFailure' ? '#FF8D1A' : '#FF4242' }">{{failureStatus[equipmentStatus].subtitle}}{{failureReason}}</text>
			<view class="btn" @click="closePopup">
				我知道了
			</view>
		</view>
		<view v-else-if="successStatus[equipmentStatus]" class="success">
			<img :src="equipmentStatus==='subscribeCancelSuccess' ? subscribeCancelSuccessLogo:successLogo" alt="">
			<text class="title">{{successStatus[equipmentStatus].title}}</text>
			<text>弹窗将在 <text style="color: #09AB7A;margin: 0 3px;"> {{seconds}} </text> 秒后关闭</text>
		</view>
		<view v-else-if="mediumStatus[equipmentStatus]" class="medium">
			<view class="content">
				<view class="fluctuation" :class="{blue: equipmentStatus !== 'starting'}">
				  <view class="external"></view>
				  <view class="middle"></view>
				  <view class="inside"></view>
				  <img :src="mediumStatus[equipmentStatus].logo" alt="" />
				</view>
				<p>{{mediumStatus[equipmentStatus].subtitle}}{{failureReason}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import failureLogo from "../../../static/failureLogo.png"
	import successLogo from "../../../static/successLogo.png"
	import loadingIcon from "../../../static/loadingIcon.png"
	import subscribeCanceling from "../../../static/subscribeCanceling.png"
	import subscribeingLogo from "../../../static/subscribeingLogo.png"
	import subscribeCancelSuccessLogo from "../../../static/subscribeCancelSuccessLogo.png"
	export default {
		name: 'popup',
		onLoad() {
		},
		props: {
		    showPopup: {//控制弹窗开关
		      type: Boolean,
		      default: false,
		    },
			equipmentStatus: {//弹窗类型
			  type: String,
			  default: '',
			},
			failureReason: {//失败原因
			  type: String,
			  default: '',
			},
		  },
		watch: {
		    equipmentStatus: {
		        handler(newValue, oldValue) {
					let status = ["startSuccess","closeSuccess","subscribeCancelSuccess","subscribeSuccess","subscribeCancelFailure"]
					console.log(newValue,status.indexOf(newValue))
					if(status.indexOf(newValue)>-1){
						this.countdown()
					}
		        }
		    }
		},
		data() {
			return {
				failureLogo,successLogo,subscribeCancelSuccessLogo,
				failureStatus:{
					startFailure:{
						title:"启动失败",
						subtitle:"失败原因：",
					},
					stopFailure:{
						title:"停止失败",
						subtitle:"请按下充电桩停止按钮以停止充电",
					},
					subscribeFailure:{
						title:"预约失败",
						subtitle:"",
					},
					subscribeCancelFailure:{
						title:"预约取消失败",
						subtitle:"",
					}
				},
				successStatus:{
					startSuccess:{
						title:"启动成功",
					},
					subscribeSuccess:{
						title:"预约成功",
					},
					closeSuccess:{
						title:"结束成功",
					},
					subscribeCancelSuccess:{
						title:"预约已取消",
					},
				},
				mediumStatus:{
					starting:{
						subtitle:'设备正在启动...',
						logo:loadingIcon
					},
					subscribeCanceling:{
						subtitle:'正在取消预约，请稍候...',
						logo:subscribeCanceling
					},
					closeCanceling:{
						subtitle:'正在停止设备，请稍候...',
						logo:subscribeCanceling
					},
					subscribeing:{
						subtitle:'设备正在预约中...',
						logo:subscribeingLogo
					},
				},
				seconds:3,
			}
		},
		methods: {
			countdown(){
				let countdownSeconds= setInterval(()=>{
					this.seconds--
					if(this.seconds===0){
						this.seconds = 3
						clearInterval(countdownSeconds)
						this.$emit("closePopup", {})
					}
				},1000)
			},
			closePopup(){
				this.$emit("closePopup", {closePopup:true})
			}
		}
	}
</script>

<style lang="scss" scoped>
.popup{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	.failure{
		width: 280px;
		height: 233px;
		background: #FFFFFF;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
		img{
			width: 56px;
			height: 56px;
			margin-bottom: 20px;
		}
		.title{
			font-size: 18px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 8px;
		}
		text{
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.btn{
			width: 232px;
			height: 40px;
			background: #15D193;
			border-radius: 22px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;
			text-align: center;
			margin-top: 36px;
		}
	}
	.success{
		width: 280px;
		height: 233px;
		background: #FFFFFF;
		border-radius: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 56px;
		img{
			width: 56px;
			height: 56px;
			margin-bottom: 12px;
		}
		.title{
			font-size: 18px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 8px;
		}
	}
	.medium{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		z-index: 10;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.content {
		  width: 280px;
		  height: 233px;
		  background: #ffffff;
		  border-radius: 12px;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;

		  p {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 16px;
		  }

		  .fluctuation {
			width: 100px;
			height: 100px;
			position: relative;
			
			@keyframes warn {
			  0% {
				transform: scale(1);
			  }
			  100% {
				transform: scale(1.2);
			  }
			}

			view {
			  border-radius: 50%;
			  position: absolute;
			  margin: auto;
			  left: 0;
			  top: 0;
			  right: 0;
			  bottom: 0;
			  background: #15d193;
			}
			
			.external {
			  width: 90px;
			  height: 90px;
			  opacity: 0.1;
			  animation: warn 2s ease-in-out infinite;
			}

			.middle {
			  width: 70px;
			  height: 70px;
			  opacity: 0.2;
			  animation: warn 2s ease-in-out infinite;
			}

			.inside {
			  width: 50px;
			  height: 50px;
			  opacity: 0.2;
			  animation: warn 2s ease-in-out infinite;
			}

			img {
			  width: 80px;
			  height: 80px;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  z-index: 30;
			}
		  }
		  .blue{
		  	view{
		  		background: #0987F5;
		  	}
		  }
		}
	}
}
</style>